/**
 * Created by zhaobo on 2016/12/23.
 */
import React, {Component} from "react";
import {
  ScrollView,
  StyleSheet,
  Image,
  Dimensions,
  View,
  Text,
  TouchableOpacity,
  BackAndroid,
  ListView,
  RecyclerViewBackedScrollView
} from "react-native";
import {Button, Card} from "react-native-elements";
import Auto from "../native_modules/TestToastModule";
import Rank from "./Rank";

const {width, height} = Dimensions.get('window');
class Sport extends Component {
  constructor() {
    super()
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      page: 0,
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy'
      ])
    }
    this.onBackEvent = this.onBackEvent.bind(this);
  }

  componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', this.onBackEvent);
  }

  onBackEvent() {
    if (this.state.page != 0) {
      Auto.show('返回一层', Auto.SHORT);
      this.setState({page: 0});
      return true;
    }
    return false;
  }

  render() {
    return (
      <ScrollView style={{
        backgroundColor: '#2fa3d3',
        flex:1,
      }}>

        <Image source={require('./img/banner.jpg')}
               style={styles.headerImage}>
          <View style={{flex:1}}/>
          <View style={styles.userInfo}>
            <Image source={require('./img/banner.jpg')}
                   style={styles.userHeadImage}/>
            <Text style={styles.userName}>老梁</Text>
          </View>
        </Image>
        <View style={{alignItems: 'flex-end',marginTop: 5,marginRight:15}}>
          <Text style={styles.joinNum}>参与健将:xx人</Text>
        </View>


        <Card containerStyle={{marginTop:5,paddingTop:0,borderRadius:5}}
              wrapperStyle={{}}>
          <View style={{
            flexDirection:'row',
            justifyContent:'space-between',
            //backgroundColor:'#11ddff'
          }}>
            <Button
              buttonStyle={{height:34,marginTop:7,marginBottom:7}}
              borderRadius={17}
              backgroundColor={"#1a75e6"}
              onPress={()=>{
                this.setState({page:1});
                Auto.show("参与名单",Auto.SHORT);
                this.props.navigator.push({
                    component: Rank,
                });
              }}
              title='参与名单'/>
            <Button
              buttonStyle={{height:34,marginTop:7,marginBottom:7}}
              borderRadius={17}
              onPress={()=>{Auto.show("活动规则",Auto.SHORT)}}
              backgroundColor={"#e64f1a"}
              title='活动规则'/>
          </View>


          <View style={{height:20}}/>
          <View style={{height:100}}>
            <ListView
              //列表的数据源
              dataSource={this.state.dataSource}
              //renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
              //解析数据源中的数据
              renderRow={(rowData) => {
              return <ShowText/>;
            }}/>
          </View>
          <View style={{height:20}}/>


          <View style={{
            flexDirection:'row',
            justifyContent:'space-around',
            alignItems:'center',
          }}>
            <View style={{flexDirection:'column',flex:1,alignItems:'center',}}>
              <Text style={{}}>里程</Text>
              <Text style={{}}>0KM</Text>
            </View>
            <TouchableOpacity activeOpacity={0.8} onPress={()=>{Auto.show("跑步吗",Auto.SHORT)}}>
              <Image source={require('./img/running.png')}
                     style={styles.beginButtonImage}/>
            </TouchableOpacity>
            <View style={{flexDirection:'column',flex:1,alignItems:'center',}}>
              <Text style={{}}>时间</Text>
              <Text style={{}}>00.00.00</Text>
            </View>
          </View>
        </Card>


        <Card
          containerStyle={{marginTop:10,marginBottom:10,padding:0,borderRadius:5,borderWidth:0}}
          wrapperStyle={{borderRadius:5,borderWidth:0,backgroundColor:'#1a75e6'}}
          title="地图预览"
          titleStyle={{color:'white',fontSize:16,marginTop:10,marginBottom:10}}
          dividerStyle={{marginBottom:0,padding:0,backgroundColor:'#1a75e6'}}>
          <TouchableOpacity activeOpacity={0.8} onPress={()=>{Auto.show("打开地图",Auto.SHORT)}}>
            <Image source={require('./img/banner.jpg')}
                   style={{width:width,height:100,borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
            </Image>
          </TouchableOpacity>
        </Card>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  header: {},
  headerImage: {
    width: width,
    height: width / 2.7,
    resizeMode: 'cover',
    flexDirection: 'column',
  },
  userInfo: {
    flexDirection: 'row',
    marginLeft: 30,
    marginBottom: 5,
  },
  userHeadImage: {
    width: 50,
    height: 50,
    resizeMode: 'cover',
    borderRadius: 25,
    borderColor: '#246988aa',
    borderWidth: 3
  },
  beginButtonImage: {
    flex: 2,
    width: 150,
    height: 150,
    resizeMode: 'cover',
    borderRadius: 75,
    borderColor: '#246988',
    borderWidth: 3
  },
  userName: {
    marginLeft: 5,
    color: '#000000',
    fontSize: 16,
  },
  joinNum: {
    color: '#ffffff',
    fontSize: 15,
  },
  content_msg: {
    color: '#000000',
    fontSize: 17,
  }
});


class ShowText extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{
            flexDirection:'row',
            justifyContent:'space-between',
            //backgroundColor:'#11ddff'
          }}>
        <Text style={styles.content_msg}>欢迎[]加入xxx</Text>
        <Text style={styles.content_msg}>2016.12.12</Text>
      </View>
    );
  }
}

export default Sport